<template>
    <div style="padding: 12px; box-sizing: border-box;">
        <el-dialog v-model="dialogVisible" :title="formData.id ? '用户修改' : '用户新增'" width="500">
            <el-form :inline="false" :model="formData">
                <el-form-item label="用户账号">
                    <el-input v-model="formData.username" placeholder="用户账号" clearable />
                </el-form-item>
                <el-form-item label="用户昵称">
                    <el-input v-model="formData.nickname" placeholder="用户昵称" clearable />

                </el-form-item>
                <el-form-item label="用户角色">
                    <el-cascader v-model="formData.roles" :options="dtableData" placeholder="用户角色" :props="props" />
                </el-form-item>
                <el-form-item label="是否禁用">
                    <el-radio-group v-model="formData.disabled">
                        <el-radio :value="true" size="large">是</el-radio>
                        <el-radio :value="false" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用户次序">
                    <el-input-number v-model="formData.order" :min="0" clearable />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button @click="onSubmit" type="primary">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-card style="width: 100%;">
            <template #header>
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <span>用户列表</span>
                    <el-button @click="handleForm()" type="primary">新增</el-button>
                </div>
            </template>
            <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="_id" border>
                <el-table-column align="center" prop="nickname" label="用户昵称" />
                <el-table-column align="center" prop="username" label="用户账号" />
                <el-table-column align="center" prop="roles" label="用户角色">
                    <template #default="scope">
                        <el-space wrap>
                            <el-tag :key="es" v-for="es in scope.row.roles.map((e: any) => e.name)">
                                {{ es }}
                            </el-tag>
                        </el-space>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="disabled" label="是否禁用">
                    <template #default="scope">
                        <el-tag v-if="!scope.row.disabled" type="success">未禁用</el-tag>
                        <el-tag v-else type="danger">已禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="order" label="次序" />
                <el-table-column align="center" label="操作">
                    <template #default="scope">
                        <el-space wrap>
                            <el-button size="small" @click="handleForm(scope.row._id)" type="primary">编辑</el-button>
                            <el-button size="small" @click="deletem(scope.row._id)" type="danger">删除</el-button>
                        </el-space>
                    </template>


                </el-table-column>
            </el-table>
            <template #footer>
                <div style="display: flex;justify-content: center;">
                    <el-pagination v-model:current-page="pagination.page" :page-size="pagination.size" background
                        layout="total, prev, pager, next" :total="pagination.total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </template>
        </el-card>
        <sDialog ref="sdialog" :content="scontent" :confirmFunction="confirmFunction"></sDialog>
    </div>
</template>

<script setup lang="ts">

import { ref, getCurrentInstance } from "vue"
import { resetAble } from "../../composable/reset"
import { ElMessage } from "element-plus";
import { register } from "../../api/login";
import { putuser, getuser, userlist, deluser, } from "../../api/uesr";
import { rolelist } from "../../api/role";
import sDialog from "../../components/sDialog.vue";
const { proxy } = getCurrentInstance() as any
const tableData = ref([])
const dtableData = ref([])
const dialogVisible = ref(false)
const pagination = ref({
    page: 1,
    size: 10,
    total: 0
})
const scontent = ref('')
const handleItemId = ref('')
const confirmFunction = async () => {
    let res = await deluser({ id: handleItemId.value })
    if (res) {
        ElMessage({
            message: '操作成功',
            grouping: true,
            type: 'success',
        })
        init()
    }
}

const handleSizeChange = () => {

}

const handleCurrentChange = () => {

}
const { data: formData, reset } = resetAble({
    username: '',
    roles: [],
    disabled: false,
    order: 0,
    nickname: "",
    id: "",
})
const handleForm = async (id?: string) => {
    if (id) {
        let res = await getuser({ id }) as any
        formData.value = res.data
        formData.value.id = id
    }

    dialogVisible.value = true
}
const deletem = async (id: string) => {
    handleItemId.value = id
    scontent.value = '确定删除吗?'
    proxy.$refs.sdialog.showCenterDialog = true
}
const props = ref({
    value: '_id',
    label: 'name',
    emitPath: false,
    multiple: true,
    checkStrictly: false,
})
const onSubmit = async () => {
    if (formData.value.id) {
        let res = await putuser(formData.value) as any
        if (res) {
            init()
            ElMessage({
                message: '操作成功',
                grouping: true,
                type: 'success',
            })
        }
    } else {
        let res = await register(formData.value) as any
        if (res) {
            init()
            ElMessage({
                message: '操作成功',
                grouping: true,
                type: 'success',
            })
        }
    }
    reset()
    dialogVisible.value = false
}

const init = async () => {

    let res = await userlist()
    if (res) {
        tableData.value = res.data
    }
    let ress = await rolelist()
    if (res) {
        dtableData.value = ress.data
    }
}

init()
</script>

<style scoped></style>